<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="250px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <!-- 卡片 -->
    <div class="clearfix">
      <div id="cardBox1">
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>最新评审动态</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page2');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>相关政策</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page3');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>评审结果公示</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page4');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>评审标准</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page5');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>业务指南</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page6');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>评审表格下载</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="
                  () => {
                    this.$router.push('/home/page7');
                  }
                "
                >more》</el-button
              >
            </div>
            <div v-for="o in 5" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
      </div>
      <div id="cardBox2">
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>系统登录</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                ></el-button
              >
            </div>
            <div class="clearfix">
              <div class="left login">
                <el-select v-model="userType" placeholder="请选择用户类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="username"
                  placeholder="请输入登录账号"
                  @blur="test1()"
                ></el-input>
                <el-input
                  v-model="password"
                  placeholder="请输入密码"
                  @blur="test2()"
                ></el-input>
                <el-input
                  class="test"
                  v-model="test"
                  placeholder="请输入验证码"
                  @blur="test3()"
                ></el-input>
                <img id="test" src="" alt="" class="left" />
                <div class="loginTest">
                  <p>{{userTypeTest}}</p>
                  <p>{{usernameTest}}</p>
                  <p>{{passwordTest}}</p>
                  <p>{{testTest}}</p>
                </div>
              </div>
              <div class="left">
                <button id="btn" @click="login()">登录</button>
              </div>
              <div class="left clearfix register">
                <a
                  href="javascript:;"
                  @click="
                    () => {
                      this.$router.push('/ForgetPassword');
                    }
                  "
                  ><p class="left">忘记密码</p></a
                >
                <a
                  href="javascript:;"
                  @click="
                    () => {
                      this.$router.push('/RegisterHome');
                    }
                  "
                  ><p class="right">新用户注册</p></a
                >
              </div>
            </div>
          </el-card>
        </div>
        <div class="card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>注册进度查询</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                ></el-button
              >
            </div>
            <div class="clearfix">
              <div class="left search">
                <div class="left">
                  <el-radio v-model="radio" label="1">专技人才注册</el-radio>
                  <el-radio v-model="radio" label="2">用人单位注册</el-radio>
                </div>
                <div>
                  <div class="right">
                    <button id="btn2" @click="search()">查询</button>
                  </div>
                  <div class="left reg" v-if="radio==1">
                    <el-input
                      v-model="id"
                      placeholder="请输入身份证号"
                      @blur="test4()"
                    ></el-input>
                    <el-input
                      v-model="name"
                      placeholder="请输入姓名"
                      @blur="test5()"
                    ></el-input>
                    <el-input
                      v-model="tel"
                      placeholder="请输入手机号"
                      @blur="test6()"
                    ></el-input>
                  </div>
                  <div class="left reg" v-if="radio==2">
                    <el-input
                      v-model="companyName"
                      placeholder="请输入单位名称"
                      @blur="test7()"
                    ></el-input>
                    <el-input
                      v-model="code"
                      placeholder="组织机构代码/统一社会信用代码"
                      @blur="test8()"
                    ></el-input>
                  </div>
                </div>
                <div class="searchTest" v-if="radio==1">
                  <p>{{idTest}}</p>
                  <p>{{nameTest}}</p>
                  <p>{{telTest}}</p>
                </div>
                <div class="searchTest" v-if="radio==2">
                  <p>{{companyNameTest}}</p>
                  <p>{{codeTest}}</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <div class="left fl">
        <img class="logo" src="../../../../assets/images/logo.jpeg" alt="" />
        <div class="left">
          <p>Copyright © 2020 xxxxx版权所有</p>
          <p>苏ICP备13xxxxxx号</p>
        </div>
      </div>
      <div class="right fr">
        <ul>
          <li class="right">
            <p><i class="el-icon-mobile-phone"></i></p>
            <p>发送邮件</p>
          </li>
          <li class="right">
            <p><i class="el-icon-mobile-phone"></i></p>
            <p>400-000-0000</p>
          </li>
          <li class="right">
            <p><i class="el-icon-mobile-phone"></i></p>
            <p>微博</p>
          </li>
          <li class="right">
            <p><i class="el-icon-mobile-phone"></i></p>
            <p>公众号</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.right {
  float: right;
}
.left {
  float: left;
}
/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 250px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 卡片 */
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 378px;
}
.el-button--text {
  color: #000 !important;
}
.text {
  color: rgb(148, 148, 148);
}
/deep/.el-card__header {
  padding: 5px 20px;
}
/deep/.el-card__body {
  padding: 5px 20px;
}
/* 卡片div */
.card {
  text-align: left;
  height: 188px;
  width: 45%;
  margin-right: 30px;
  margin-bottom: 15px;
  .el-card {
    width: 100%;
    height: 100%;
  }
}
#cardBox1 {
  float: left;
  width: 65%;
  .card {
    float: left;
  }
}
#cardBox2 {
  float: left;
  width: 31%;
  .card {
    height: 245px;
    width: 100%;
  }
}
// 右侧卡片
/deep/input {
  width: 195px;
  height: 30px;
  margin-bottom: 10px;
}
/deep/.test {
  input {
    width: 115px;
  }
}
#test {
  width: 70px;
  height: 30px;
  margin-left: 10px;
}
/deep/div.test {
  width: 115px;
  float: left;
}
/deep/.login {
  width: 220px;
  position: relative;
  .loginTest{
    position: absolute;
    top:5px;
    left:92%;
    color: red;
    font-size: 12px;
    width: 100%;
    p:nth-of-type(1){
      position: absolute;
      top: 0;
      left: 0;
    }
    p:nth-of-type(2){
      position: absolute;
      top: 40px;
      left: 0;
    }
    p:nth-of-type(3){
      position: absolute;
      top: 80px;
      left: 0;
    }
    p:nth-of-type(4){
      position: absolute;
      top: 120px;
      left: 0;
    }
  }
}
.search{
  position: relative;
  .searchTest{
    position: absolute;
    top:40px;
    left:60%;
    color: red;
    width: 100%;
    font-size: 12px;
    p:nth-of-type(1){
      position: absolute;
      top:0;
      left:0;
    }
    p:nth-of-type(2){
      position: absolute;
      top:40px;
      left:0;
    }
    p:nth-of-type(3){
      position: absolute;
      top:80px;
      left:0;
    }
  }
}
.register {
  width: 195px;
  height: 20px;
  a {
    color: rgb(204, 204, 204);
    font-size: 12px;
  }
}
#btn {
  width: 96px;
  height: 60px;
  color: rgb(153, 153, 153);
  margin-top: 40px;
  margin-left: 24px;
}
#btn2 {
  width: 96px;
  height: 30px;
  color: rgb(153, 153, 153);
  margin-top: 40px;
  margin-left: 24px;
}
label.el-radio {
  margin: 10px;
  font-size: 14px;
}
.reg {
  width: 220px;
}
// footer
.footer {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 1px solid rgb(204, 204, 204);
}
.logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.fl {
  img {
    float: left;
    margin: 15px 20px;
  }
  div {
    margin-top: 30px;
    text-align: left;
    p {
      color: rgb(204, 204, 204);
      font-size: 12px;
    }
  }
}
.fr {
  li {
    margin-top: 25px;
    margin-right: 70px;
    color: rgb(153, 153, 153);
    p {
      margin-top: 5px;
      font-size: 12px;
    }
    i {
      font-size: 24px;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      test: "",
      radio: "1",
      id: "",
      idTest:'',
      name: "",
      nameTest:'',
      tel: "",
      telTest:'',
      usernameTest:'',
      passwordTest:'',
      testTest:'',
      code:'',
      codeTest:'',
      companyName:'',
      companyNameTest:'',
      options: [
        {
          value: "专技人才",
          label: "专技人才",
        },
        {
          value: "用人单位",
          label: "用人单位",
        },
      ],
      userType: "",
      userTypeTest:''
    };
  },
  methods: {
    test1(){
      if(this.username==''){
        this.usernameTest='×';
      }else{
        this.usernameTest='';
      }
    },
    test2(){
      if(this.password==''){
        this.passwordTest='×';
      }else{
        this.passwordTest='';
      }
    },
    test3(){
      if(this.test==''){
        this.testTest='验证码不能为空';
      }else{
        this.testTest='';
      }
    },
    login() {
      this.test1();
      this.test2();
      this.test3();
      if((this.usernameTest==''&&this.passwordTest=='')&&(this.testTest=='')){
        if (this.userType == "专技人才") {
          this.$axios({
            url: "/staff/loginStaff",
            data: {
              certificate: this.username,
              password: this.password
            },
            method: "post"
          }).then((res) => {
            if(res.data.code==0){
              sessionStorage.setItem("user", JSON.stringify(res.data.data));
              this.$router.push("/personalinformation");
            }else{
              this.$alert(res.data.msg, '登陆失败', {
                confirmButtonText: '确定'
              });
            }
          });
        } else if (this.userType == "用人单位") {
          this.$axios({
            url: "/company/loginCompany",
            data: {
              certificate: this.username,
              password: this.password
            },
            method: "post"
          }).then((res) => {
            sessionStorage.setItem("user", JSON.stringify(res.data.data));
            this.$router.push("/Company");
          });
        }else{
          this.userTypeTest='请选择用户类型'
        }
      }
    },
    test4(){
      if(this.id==''){
        this.idTest='身份证号不能为空';
      }else{
        this.idTest='';
      }
    },
    test5(){
      if(this.name==''){
        this.nameTest='×';
      }else{
        this.nameTest='';
      }
    },
    test6(){
      if(this.tel==''){
        this.telTest='电话不能为空';
      }else{
        this.telTest='';
      }
    },
    test7(){
      if(this.companyName==''){
        this.companyNameTest='单位名称不能为空';
      }else{
        this.companyNameTest='';
      }
    },
    test8(){
      if(this.code==''){
        this.codeTest='×';
      }else{
        this.codeTest='';
      }
    },
    search(){
      this.test4();
      this.test5();
      this.test6();
      if((this.idTest==''&&this.nameTest=='')&&(this.telTest=='')){
        if(this.radio==1){
          this.$axios({
            url:'/staff/findState',
            data:{
              certificate:this.id,
              name:this.name,
              phone:this.tel
            },
            method:'post'
          }).then(res=>{
            let sta='';
            if(res.data.data==0){
              sta='注册审核中'
            }else if(res.data.data==1){
              sta='注册已审核通过'
            }else if(res.data.data==2){
              sta='注册审核未通过'
            }
            this.$alert(sta, '注册进度查询', {
            confirmButtonText: '确定'
            });
          })
        }
      }else if(this.companyNameTest==''&&this.codeTest==''){
        if(this.radio==2){
          this.$axios({
            url:'/staff/company/findStatus',
            params:{
              companyName:this.companyName,
              code:this.code
            }
          }).then(res=>{
            let sta='';
            if(res.data.data==0){
              sta='注册审核中'
            }else if(res.data.data==1){
              sta='注册已审核通过'
            }else if(res.data.data==2){
              sta='注册审核未通过'
            }
            this.$alert(sta, '注册进度查询', {
            confirmButtonText: '确定'
            });
          })
        }
      }
    }
  },
  mounted() {
    sessionStorage.setItem("tagIndex", "1");
  }
};
</script>